<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="${blog.keywords}" />
<meta name="summary" content="${blog.summary}" />
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>我的博客</title>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/cms.css" />

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/inc/top.jsp"></jsp:include>

	<!-- 横幅 -->
	<div class="container">
		<div class="row">
			<div class="col-xs-12 banner"></div>
		</div>
	</div>

	<br />
	<!-- 主体内容区 -->
	<div class="container">
		<div class="row">
			<div class="col-md-8">

				<!-- 图文文章 -->
				<h2 align="center">${blog.title}</h2>
				<div class="text-center">作者：${blog.author.nickname}&nbsp;&nbsp;&nbsp;&nbsp;来源：${blog.keywords}&nbsp;&nbsp;&nbsp;&nbsp; 浏览：${blog.hits}</div>
				<hr />
				<div class="content">${blog.content}</div>
				<%-- <c:choose>
					
					<c:when test="${blog.type == 0 }">
					<div class="content">${blog.content}</div>
					</c:when>
					<c:when test="${blog.type == 1 }">
						<div class="content">
							<!-- 图片内容幻灯片 -->
							<div id="carouselExampleIndicators" class="carousel slide"
								data-ride="carousel">
								<ol class="carousel-indicators">
									<li data-target="#carouselExampleIndicators" data-slide-to="0"
										class="active"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
								</ol>
								<div class="carousel-inner">
									<c:forEach items="${blog.imgArticles}" var="slide" varStatus="idx">
										<div class="carousel-item ${idx.index==0 ? 'active' : ''}">
											<img class="d-block w-100" src="${slide.path}"
												alt="${blog.title}">
											<div class="carousel-caption d-none d-md-block">
												<h5>
													<a href="${slide.path }">${slide.desc}</a>
												</h5>
											</div>
										</div>
									</c:forEach>
								</div>
								<a class="carousel-control-prev"
									href="#carouselExampleIndicators" role="button"
									data-slide="prev"> <span class="carousel-control-prev-icon"
									aria-hidden="true"></span> <span class="sr-only">Previous</span>
								</a> <a class="carousel-control-next"
									href="#carouselExampleIndicators" role="button"
									data-slide="next"> <span class="carousel-control-next-icon"
									aria-hidden="true"></span> <span class="sr-only">Next</span>
								</a>
							</div>
							<div class="media">
								<div class="media-body">
									<h3 class="media-heading article_title">
										<a href="/article/${blog.id}">${blog.title }</a>
									</h3>
									<p>${blog.summary}</p>
									<p class="blog_item_footer">
										<span class="glyphicon glyphicon-user" title="作者"></span>作者：${blog.author.nickname}&nbsp;&nbsp;
										&nbsp; <span class="glyphicon glyphicon-time" title="发布时间"></span>发布：&nbsp;
										<fmt:formatDate value="${blog.updated}"
											pattern="yyyy-MM-dd HH:mm:ss" />
										&nbsp;&nbsp;&nbsp;&nbsp; <span
											class="glyphicon glyphicon-eye-open" title="浏览量"></span>浏览量：&nbsp;
										${blog.hits}&nbsp;&nbsp;&nbsp;&nbsp;
									</p>
								</div>
							</div>

						</div>
					</c:when>
				</c:choose> --%>
				<div class="text-right">
					发布时间：
					<fmt:formatDate value="${blog.updated}" pattern="yyyy-MM-dd HH:mm:ss" />
				</div>
				<div>
					<button type="button" id="preArticle" class="btn btn-primary">上一篇</button>
					<button style="float: right;" type="button" id="nextArticle" class="btn btn-primary">下一篇</button>
				</div>
				<hr />
				<div>
					<form id="comment" name="comment" method="post">
						<textarea id="content" name="content" cols="3" class="form-control" placeholder="${_LOGIN_USER_.nickname}发表评论"></textarea>
						<button type="submit" class="btn btn-info btn-block">发表</button>
					</form>
				</div>
				<br />
				<h4>最新评论</h4>
				<div class="comments" id="comments">
					<c:forEach items="${comments}" var="comment">
						<div class="media">
							<div class="media-left">
								<a href="#"> <img class="media-object" src="${comment.author.avatar}" style="max-height: 50px" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">${comment.author.nickname}：</h4>
								<p>${comment.content}</p>
								<p>
									评论时间：
									<fmt:formatDate value="${comment.created}" pattern="yyyy-MM-dd HH:mm:ss" />
								</p>
							</div>
						</div>
					</c:forEach>
					<div>
						<%-- <button type="button" id="preBtn" class="btn btn-primary">上一页</button>
						&nbsp;
						<c:forEach  begin="1" end="${pages}" var="pageNo">
							<c:choose>
								<c:when test="${currentPage == pageNo}">
									${pageNo}
								</c:when>
								<c:otherwise>
									<a href="/article/commentDetail?articleId=${blog.id}&pageNo=${pageNo}">${pageNo}</a>			
								</c:otherwise>
							</c:choose>
						</c:forEach>
						&nbsp;
						<button type="button" id="nextBtn" class="btn btn-primary">下一页</button> --%>
						<nav aria-label="Page navigation example">
					<ul class="pagination">
						<c:choose>
							<c:when test="${currentPage <= 1 }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${currentPage-1 }" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:otherwise>
						</c:choose>

						<c:forEach begin="1" end="${pages}" var="pageNo">
							<%-- <c:choose>
								<c:when test="${currentPage == pageNo}">
									<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=1">${pageNo}</a></li>

								</c:when>
								<c:otherwise> --%>
									<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${pageNo}">${pageNo}</a></li>
								<%-- </c:otherwise>
							</c:choose> --%>
						</c:forEach>

						<c:choose>
							<c:when test="${currentPage >= pages }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${currentPage+1}" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:otherwise>
						</c:choose>
					</ul>
				</nav>
					</div>
				</div>
				
			</div>
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">热门文章</h3>
					</div>
					<div class="panel-body">
						<c:forEach items="${hitBlogs}" var="blog">
							<p>
								<a href="/article/${blog.id}">${blog.title}</a>
							</p>
						</c:forEach>
					</div>
				</div>
				<hr/>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">点击率排行榜</h3>
					</div>
					<div class="panel-body">
						<c:forEach items="${articleHits}" var="hits">
							<p>
								<a href="/article/${hits.id}">${hits.title}</a>
							</p>
						</c:forEach>
					</div>
				</div>
				<hr/>
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">评论排行榜</h3>
					</div>
					<div class="panel-body">
						<c:forEach items="${articleComments}" var="comments">
							<p>
								<a href="/article/${comments.id}">${comments.title}</a>
							</p>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="/WEB-INF/inc/footer.jsp" />

	<script type="text/javascript">
		var authorNickname = "${_LOGIN_USER_.nickname}";

		var template = "<div class=\"media\">" + "<div class=\"media-left\">" + "<a href=\"#\">" + "<img class=\"media-object\" src=\"${_LOGIN_USER_.avatar}\" style=\"max-height: 50px\" alt=\"...\">" + "</a>"
				+ "</div>" + "<div class=\"media-body\">" + "<h4 class=\"media-heading\">${_LOGIN_USER_.nickname}：</h4>" + "<p>{{comment_content}}</p>" + "<p>评论时间：刚刚</p>" + "</div>" + "</div>";

		$(document).ready(function() {
			if (authorNickname.length == 0) {
				$("#content").attr("disabled", "disabled").attr("placeholder", "请登录后发表评论");
			}

			$("#comment").submit(function() {
				var content = $("#content").val();
				if (content.length == 0) {
					alert('请填写评论内容');
					return false;
				}

				$.ajax({
					url : '/my/comment/' + '${blog.id}',
					type : 'post',
					data : $(this).serialize(),
					error : function() {
						alert('发表失败');
					},
					success : function(data) {
						if (data.status) {
							var comments = $("#comments").html();
							$("#comments").html(template.replace("{{comment_content}}", content) + comments);
							$("#content").val("");
							//刷新页面
							location="/article/"+${blog.id};
						} else {
							alert(data.message);
							location="/article/"+${blog.id};
						}
					}

				});
				return false;
			});
			$('#preBtn').click(function() {
				var current = ${currentPage};
				if (current == 1) {
					location = "/article/commentDetail?articleId=" + ${blog.id}	+"&pageNo=1";
				} else if (current > 1) {
					location = "/article/commentDetail?articleId=" + ${blog.id}	+"&pageNo=" + (current - 1);
				}
			})
			$('#nextBtn').click(function() {
				var current = ${currentPage};
				var total = ${pages};
				if (current < total) {
					location = "/article/commentDetail?articleId=" + ${	blog.id	} +"&pageNo=" + (current + 1);
				} else if (current == total) {
					location = "/article/commentDetail?articleId=" + ${blog.id}	+"&pageNo=" + total;
				} else if (total == 1) {
					location = "/article/commentDetail?articleId=" + ${blog.id} + "&pageNo=1";
				}
			})
			$('#preArticle').click(function(){
				location="/article/nextArticle?articleId=" + ${blog.id}+"&type=0";
			})
			$('#nextArticle').click(function(){
				location="/article/nextArticle?articleId=" + ${blog.id}+"&type=1";
			})
		});
	</script>
</body>
</html>